<template>
	<div :class="prefixCls">
		<Popover title="" trigger="click" :overlayClassName="`${prefixCls}__overlay`">
			<Badge :count="count" dot :numberStyle="numberStyle">
				<BellOutlined />
			</Badge>
			<template #content>
				<Tabs>
					<template v-for="item in listData" :key="item.key">
						<TabPane>
							<template #tab>
								{{ item.name }}
								<span v-if="item.list.length !== 0">({{ item.list.length }})</span>
							</template>
							<!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
							<NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
							<NoticeList :list="item.list" v-else />
						</TabPane>
					</template>
				</Tabs>
			</template>
		</Popover>
	</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { Popover, Tabs, Badge } from 'ant-design-vue';
import { BellOutlined } from '@ant-design/icons-vue';
import { tabListData, ListItem } from './data';
import NoticeList from './NoticeList.vue';
import { useDesign } from '@/hooks/web/useDesign';
import { useMessage } from '@/hooks/web/useMessage';

export default defineComponent({
	components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
	setup() {
		const { prefixCls } = useDesign('header-notify');
		const { createMessage } = useMessage();
		const listData = ref(tabListData);

		const count = computed(() => {
			let count = 0;
			for (let i = 0; i < tabListData.length; i++) {
				count += tabListData[i].list.length;
			}
			return count;
		});

		function onNoticeClick(record: ListItem) {
			createMessage.success('你点击了通知，ID=' + record.id);
			// 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
			record.titleDelete = !record.titleDelete;
		}

		return {
			prefixCls,
			listData,
			count,
			onNoticeClick,
			numberStyle: {},
		};
	},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-header-notify';

.@{prefix-cls} {
	padding-top: 2px;

	&__overlay {
		max-width: 360px;
	}

	.ant-tabs-content {
		width: 300px;
	}

	.ant-badge {
		font-size: 18px;

		.ant-badge-multiple-words {
			padding: 0 4px;
		}

		svg {
			width: 0.9em;
		}
	}
}
</style>
